import { ItemProps, ItemState } from '@/models/item';

import React, { FC } from 'react';
import { connect, ConnectProps } from 'umi';
import styles from './index.less';
import { Row, Col, Tag } from 'antd'
const { CheckableTag } = Tag
import ItemItem from '@/components/ItemItem';

interface PageProps extends ConnectProps{
  item: ItemState
}

const Item: FC<PageProps> = ({ item, dispatch }) => {
  const { items = [], itemsCategory = {} } = item
  const categoryNames = getCategoryNames()
  enum localCategoryNames {
    basic= '基础物品',
    upgrade= '升级物品',
    neutral= '中立物品'
}
  function getCategoryNames() {
    const categoryNames = []
    for (var key in itemsCategory) {
      categoryNames.push(key)
    }
    return categoryNames
  }
  const clickItem = function (name:string,e) {
    console.log(items[name]);
    
  }
  
  return (
    <div>
      <div>
        {
          categoryNames.map(category => (
            <div>
              <p key={category}>{localCategoryNames[category as keyof typeof localCategoryNames]}:</p>
              <Row>
                {itemsCategory[category].map((item:any) => (
                  <Col key={item.name} span={22} offset={1}>
                    <p>{item.name}:</p>
                    <Row gutter={2} >
                      {
                        item.items.map((it: any) => (
                          <Col key={it.item_id} span={5} offset={1} onClick={(e)=>clickItem(it.name,e)}>
                            {/* <p >{ it.name_loc }</p> */}
                            <ItemItem data={it} thisIndex={it.item_id} />
                          </Col>
                        ))
                      }
                    </Row>
                  </Col>
                ))}
              </Row>
            </div> 
          ))
        }
      </div>
    </div>
  )
}

export default connect(
  ({item}:{item:ItemState})=>({item})
)(Item)
